﻿@model  Authentication.Model.ViewModel.Account.AssignGroupViewModel
<ul class="breadcrumb">
    <li>
        <i class="icon-home"></i>
        <a href="/">Account</a>
        <i class="icon-angle-right"></i>
    </li>
    <li>
        <i class="icon-link"></i>
        <a href="#">Assign to group</a>
    </li>
</ul>
<!--/span-->

<div class="row-fluid">
    <div class="box span12">
        <div class="box-header" data-original-title>
            <h2><i class="halflings-icon lock"></i><span class="break"></span>Assign users to a group</h2>
            <div class="box-icon">
                <a href="#" class="btn-minimize"><i class="halflings-icon chevron-up"></i></a>
            </div>
        </div>
        <div class="box-content">

            <div class="box-1 span4">
                <div class="priority high"><span><i class="icon-group"></i>&nbsp;Group user</span></div>
                <div class="task high">
                    <div class="desc">
                        <div class="title">Select group</div>
                        <div>select group to contain users that will be assigned</div>
                        <div>@Html.DropDownListFor(m => m.GroupIdentifier, new SelectList(Model.Groups, "GroupIdentifier", "GroupName"), "-- Select group --", new { @class = "row-fluid" })</div>
                    </div>
                </div>

                <div class="priority medium"><span>Users in group</span></div>
                <div class="task medium">
                    <div class="desc">
                        <div class="title">Select users</div>
                        <div>select users that will be assigned into the selected group</div>
                        <div>
                            <select id="selectedUsers" multiple data-rel="chosen" class="row-fluid">
                                @foreach (var item in Model.Users)
                                {
                                    <option value="@item.UserName" groupidentifier="@item.GroupIdentifier">@item.UserName</option>
                                }
                            </select>
                        </div>
                    </div>
                </div>

                @if (Model.IsSupperAdmin)
                {
                    <div class="desc">
                        @Html.HiddenFor(x => x.Otp)
                        @Html.HiddenFor(x => x.OtpCounter)
                        <button id="btnApply" class="btn btn-success"><i class="icon-ok"></i>Apply change</button>
                    </div>
                }
            </div>
            <div class="box-1 span8">
                <div class="priority low"><span><i class="icon-user"></i>Users list</span></div>
                <div class="task low">
                    <table class="table table-striped bootstrap-datatable datatable" id="dataTables-1" style="height: 50px;">
                        <thead>
                            <tr>
                                <th class="text-left">User</th>
                                <th class="text-left">Email</th>
                                <th class="text-left">First Name</th>
                                <th class="text-left">Last Name</th>
                                <th class="text-left">Phone</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <!--/span-->
</div>
<!--/row-->
@section scripts
{
    <script>
        $(document).ready(function () {
            var table = $('#dataTables-1').dataTable({
                "bServerSide": true,
                "bProcessing": true,
                "responsive": true,
                oLanguage: {
                    sProcessing: "<img src='http://www.arabianbusiness.com/skins/ab.main/gfx/loading_spinner.gif'/>"
                },
                "bAutoWidth": false,
                "aLengthMenu": [10, 30, 50, 100],
                "pageLength": 30,
                "sAjaxSource": '/account/usersdata/',
                "fnServerData": function (sSource, aoData, fnCallback) {
                    $.ajax({
                        "dataType": 'json',
                        "type": "POST",
                        "url": sSource,
                        "data": aoData,
                        "success": fnCallback
                    });
                },
                "sDom": "<'row-fluid'<'span6'l><'span6'f>r>t<'row-fluid'<'dataTables_wrapper'ip>>",
                "sPaginationType": "bootstrap",//"full_numbers",
                "aoColumns": [
                            { "sName": "UserName", "bSortable": false },
                            { "sName": "Email", "bSortable": false },
                            { "sName": "FirstName", "bSortable": false },
                            { "sName": "LastName", "bSortable": false },
                            { "sName": "Phone", "bSortable": false, hidden: true }],
                "aoColumnDefs": [{
                    "aTargets": [0],
                    "mData": null,
                    "mRender": function (data, type, full) {
                        if ($('#GroupIdentifier').val() == full[6])
                            return '<label class="control-label"><input type="CheckBox" class="checkbox" checked="checked"  onclick="assignGroup(this.checked, \'' + full[0] + '\');"/> <b>' + full[0] + '</b></label>';
                        else
                            return '<label class="control-label"><input type="CheckBox" class="checkbox" onclick="assignGroup(this.checked, \'' + full[0] + '\');"/> <b>' + full[0] + '</b></label>';
                    }
                }]
            });
        });
    </script>

    @if (true)
    {
        <script type="text/javascript">
            var ass_arr = [];
            function assignGroup(checked, user) {
                if ($("#GroupIdentifier").val().length > 0) {
                    if (checked) { ass_arr.push(user); }
                    else { ass_arr.remove(user); }
                    $('#selectedUsers').val(ass_arr).trigger("liszt:updated");
                }
                else {
                    alert('Please select a group');
                }
            }

            $("#GroupIdentifier").change(function () {
                $('#dataTables-1').dataTable().fnDraw();
                $.post('@Authentication.Configuration.SystemConfiguration.UsersInGroupAction', { groupidentifier: $("#GroupIdentifier").val(), otp: $("#Otp").val(), counter: $("#OtpCounter").val() }, function (data) {
                    if (data.IsSuccess) {
                        ass_arr = [];
                        for (var i = 0; i < data.Records.length; i++) {
                            ass_arr.push(data.Records[i].UserName);
                        }
                        $('#selectedUsers').val(ass_arr).trigger("liszt:updated");
                    }
                    else {
                        reload();
                    }
                });
            });

            $("#btnApply").click(function () {
                if ($("#GroupIdentifier").val().length > 0) {
                    var items = JSON.stringify($('#selectedUsers').chosen().val());
                    $.post('@Authentication.Configuration.SystemConfiguration.AssignGroupAction', { GroupIdentifier: $("#GroupIdentifier").val(), 'UsersName': items, Checked: true }, function (data) { });
                    reload();
                }
                else {
                    alert('Please select a group');
                }
            });
        </script>
    }
}